import Vue from 'vue'
import VueRout from 'vue-router'
// import Home from '../pages/Home'
// import List from "../pages/List"
// import Show from '../pages/Home/Show'
// import Play from '../pages/Home/Play'
// import Work from '../pages/Home/Work'
const Home = () => import('../pages/Home')
const List = () => import('../pages/List')
const Show = () => import('../pages/Home/Show/index.vue')
Vue.use(VueRout)
// 每次都添加很麻烦,所以直接在VueRout中复写push函数
let oldPush = VueRout.prototype.push
VueRout.prototype.push = function (location, cb = () => { }, cb2 = () => { }) {
    // 函数获取时this为空,所以需要修改this指向
    oldPush.call(this, location, cb, cb2)
}
export default new VueRout({
    mode: 'history',
    routes: [
        {
            path: '/',
            redirect: '/home'
        },
        {
            path: "/home",
            component: Home,
            children: [
                {
                    // 使用params传参时,需要修改路由表中的信息,以接收数据
                    // 修改格式为 路由 /:数据名/数据名? ,如果不是必填参数,需要在其后添加?表示非必填参数
                    // 可选的数据必须要放置在最后,否则如果没有传递必选的值会直接将可选的传递值给与必选的值
                    path: '/home/show/:name/:age?',
                    name: 'Show',
                    component: Show,
                    // meta:路由源信息,用于描述当前路由,在路由组件中使用 $route.meta获取,一般用来暴露给外部,通过遍历生成导航栏信息
                    meta: { title: "Show" },
                    // 路由组件传参
                    // 对象形式,就是固定的参数,在目标组件中使用props直接接收
                    // props: {
                    //     sex: '男',
                    //     money: 780
                    // }
                    // 布尔值
                    // props: true
                    // 传递值为一个函数,其返回值代表传入目标组件的props值(必须返回一个对象)
                    props(route) {
                        // 其中接收一个参数值,值为其目标组件的$route配置对象
                        console.log(route);
                        // 可以通过展开的方式将其中的params或者query以及新添加的苏剧通过props的方式传递过去
                        // 目标组件使用props接收
                        return { ...route.params }
                    }


                },

            ]
        },
        {
            path: "/list",
            component: List
        }
    ]
})